<template>
  <div class="model">
    <!-- <video src="http://vt1.doubanio.com/201909110840/586e23bbf5f26e614e4c9bc29353bf41/view/movie/M/402440969.mp4"
           controls></video> -->
    <div style="width:800px;height:400px">
      <video-player class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"></video-player>
    </div>

  </div>
</template>

<script>
// import mov from 'D:/movie.mp4'
export default {
  name: 'model',
  // 实例的数据对象
  data () {
    return {
      msg: 'model',
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: '', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'http://vt1.doubanio.com/201909110840/586e23bbf5f26e614e4c9bc29353bf41/view/movie/M/402440969.mp4' // url地址
        }],
        poster: '', // 你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  // created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  created () {
    var arr = [1, 3, 5, 7, 9]
    // for (var i = 0; i < 5; i++) {
    //   console.log(i)
    // }

    // for (var i = 0; i < 5; i++) {
    //   console.log(i)
    // }

    for (var i in arr) {
      console.log(i)
    }
    console.log('===========: ', i)
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  // 方法
  methods: {
    // listen event
    onPlayerPlay (player) {
      // console.log('player play!', player)

    },
    onPlayerPause (player) {
      // console.log('player pause!', player)
    },
    // ...player event

    // or listen state event
    playerStateChanged (playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied (player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  },
  // 侦听器，监测Vue实例上的数据变动
  watch: {

  },
  // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
  mounted () {

  }
}
</script>

<style>
</style>
